<template>
  <div class="chart-block chart-pro">
    <chart-wrapper :loading="loading" :show="show">
      <ui-echarts-basics
        :option="option"
        :width="width"
        :height="height"
        :merge="merge"
        :tooltip="tooltip"
      ></ui-echarts-basics>
    </chart-wrapper>
  </div>
</template>
<script>
import ChartWrapper from "@/components/reservation/chart-wrapper";
import UiEchartsBasics from "@/components/reservation/ui-echarts-basics.vue";

export default {
  name: "ui-echarts",
  components: { ChartWrapper, UiEchartsBasics },
  props: {
    title: {
      type: String,
      default: ""
    },
    titleTip: {
      type: String,
      default: ""
    },
    subTitle: {
      type: String,
      default: ""
    },
    loading: {
      type: Boolean,
      default: false
    },
    // echarts的配置项
    option: {
      type: Object,
      default: _ => {}
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    merge: {
      type: Boolean,
      default: false
    },
    tooltip: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    show() {
      return (
        Array.isArray(this.option.series) &&
        this.option.series.length > 0 &&
        this.option.series[0].data.length > 0
      );
    }
  },
  data() {
    return {
      resizeTimer: null, //resize触发间隔
      init: false,
      config: {},
      target: null,
      autoTip: null,
      aaa: {}
    };
  },
  watch: {
    option: {
      handler(v) {
        this.aaa = v;
      }
    }
  },
  methods: {},
  mounted() {},
  beforeDestroy() {}
};
</script>
<style lang="scss" scoped>
$block-height: 100%;

.chart-block {
  height: $block-height;
}
</style>
